<template>
  <UniPopup ref="connectionsModalRef" :z-index="999" :isMaskClick="false">
    <view class="connections-modal">
      <view @click="editInformation">
        <TImage
          src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/connections.png"
          width="750rpx"
          height="1040rpx"
        />
      </view>

      <view class="ali-icon icon-guanbi" @click="closePopup"></view>
    </view>
  </UniPopup>
</template>
<script setup lang="ts">
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { getCurrentInstance, onMounted } from 'vue';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import { selectUserPerfectInfoProgress } from '@/api/index';
  const _this = getCurrentInstance();

  onMounted(() => {
    queryUserPerfectInfoProgress();
  });

  const editInformation = function () {
    navigateTo({
      name: 'myProfile',
      options: {},
    });
  };

  const queryUserPerfectInfoProgress = async () => {
    const res = await selectUserPerfectInfoProgress();
    console.log(res);

    if (!res.complete) {
      openPopup();
    }
  };

  const openPopup = (direction: string = 'center') => {
    (_this?.refs['connectionsModalRef'] as any).open(direction);
  };
  const closePopup = () => {
    (_this?.refs['connectionsModalRef'] as any).close();
  };
</script>
<style lang="scss" scoped>
  .connections-modal {
    background: rgba(0, 0, 0, 0.7);
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .icon-guanbi {
      position: absolute;
      bottom: 200rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 88rpx;
      color: #8b8a8a;
    }
  }
</style>
